@import '../../color.less';
@import '../../index.less';
.transition{
	transition: transform .735s cubic-bezier(.4,1,.2,1), opacity .735s cubic-bezier(.4,1,.2,1);	
}
.hide{
  // display: none;
	opacity: 0;
	transform: translate3d(100%,0,0);
}
.show{
  // display: block;
	opacity: 1;
	transform: translate3d(0,0,0);
}


.drag {
  .dragBar;
  height: 20px;
}

.loginLoading{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80%;
}

.wrapQrcode {
  position: absolute;
	left: 0;
	top: 20px;
  width: 100%;
  .back {
    position: absolute;
    color: @mainColor;
    font-size: 18px;
    cursor: pointer;
    left: 18px;
    top: 4px
  }
	.transition();
	.hide();
  .qrcode {
    text-align: center;
    padding: 70px 0 40px;
    img {
      max-width: 60%;
    }
  }
  p {
    padding: 0;
    margin: 0;
    text-align: center;
    color: #333333
  }
}

.wrapLogin {
  .transition();
  text-align: center;
  .avatar {
    padding: 70px 0 40px;
    img {
      max-width: 40%;
    }
  }
  p {
    padding: 0;
    margin: 0;
    text-align: center;
    color: #333333
  }
  .login {
    padding: 20px 0 40px;
    button {
      width: 70%;
    }
  }
  .change {
    color: @mainColor;
    cursor: pointer;
    font-size: 12px;
  }
}

.content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}
.content.loginActive{
	.wrapQrcode{
		.show();
	}
	.wrapLogin{
		.hide();
		transform: translate3d(-100%,0,0);
	}
}
